<% include ./side.html %>
<style scoped>
	.com_top_title:after{
		content:'';
		display:block;
		clear:both;
	}
	table.table{
		background:#fff;
	}
	table.table .light_color th{
		font-weight:400;
	}
	table.table tr td{
		font-size:12px;
	}
	.block-time .item {
		width: 33.33333%;
		float: left;
		border-right: solid 1px #eee;
		overflow: hidden;
		padding: 20px; 
	}
	.block-time .com_h1 {
		font-size: 22px;
		color:#333;
		border-bottom: solid 1px #eee;
		padding-bottom: 10px;
		margin-bottom: 10px; 
	}
	.block-time .item-full {
		width: 100%;
		float: left;
		overflow: hidden;
	}
	.block-time .item-full:nth-child(:odd) {
		border-right: none; 
	}
	.block-time .item-full li {
		width: 25%;
		float: left;
		margin: 8px 0; 
	}
	.block-time .item-full li h1 {
		font-size: 20px;
		color: #999; 
		font-weight:300;
	}
	.block-time .item-full h2 {
		font-size: 30px; 
	}
	.block-time .top-width {
		width: 100% !important; 
	}
	.echartBorwsers {
		width: 100%;
		height: 220px; 
	}
	@media (max-width: 768px) {
		.com_slide_tab_x .item{
			padding:0;
			margin-right: 10px;
		}
		.block-time .item-full li{
			height:70px;
		}
		.block-time .item-full li h1{
			font-size:14px;
		}
		.block-time .item-full h2{
			font-size:16px;
		}
		.block-time .item{
			width:100%;
		}
	}
</style>
<div class="com_content_body main pb100" id="pages" v-cloak>
	<div class="com_top_title">
		<h1 class="com_h1 fl">单页面性能</h1>
		<commonsearch :done="getSearchData"></commonsearch>
	</div>
	<div class="com_slide_tab_x mt30 mb30">
		<div class="item" :class="{'active':lable==1}" @click="checkoutLabel(1)">性能详情</div>
		<div class="item" :class="{'active':lable==2}" @click="checkoutLabel(2)">ajax调用</div>
		<div class="item" :class="{'active':lable==3}" @click="checkoutLabel(3)">页面慢加载追踪</div>
		<div class="item" :class="{'active':lable==4}" @click="checkoutLabel(4)">资源慢加载追踪</div>
	</div>
	<!-- 页面平均耗时说明 -->
	<div class="com_block block-time" v-show="lable==1&&pagesItemData.load_time">
		<div class="item-full div1">
			<h1 class="com_h1">页面平均耗时</h1>
			<li>
				<h1>平均加载耗时(s)</h1>
				<h2 class="red">{{pagesItemData.load_time|toFixed(true)}}</h2>
			</li>
			<li>
				<h1>平均白屏耗时(ms)</h1>
				<h2 class="red">{{pagesItemData.white_time|toFixed}}</h2>
			</li>
			<li>
				<h1>平均DOM构建耗时(s)</h1>
				<h2 class="red">{{pagesItemData.dom_time|toFixed(true)}}</h2>
			</li>
			<li>
				<h1>调用次数</h1>
				<h2>{{pagesItemData.count||0}}</h2>
			</li>
			<li>
				<h1>平均解析DOM耗时(s)</h1>
				<h2>{{pagesItemData.analysisDom_time|toFixed(true)}}</h2>
			</li>
			<li>
				<h1>平均DNS解析耗时(ms)</h1>
				<h2>{{pagesItemData.dns_time|toFixed}}</h2>
			</li>
			<li>
				<h1>平均TCP连接耗时(ms)</h1>
				<h2>{{pagesItemData.tcp_time|toFixed}}</h2>
			</li>
			<li>
				<h1>平均request请求耗时(ms)</h1>
				<h2>{{pagesItemData.request_time|toFixed}}</h2>
			</li>
			<li>
				<h1>平均页面准备耗时(ms)</h1>
				<h2>{{pagesItemData.ready_time|toFixed}}</h2>
			</li>
		</div>
	</div>
	<div class="com_block block-time mt20" v-show="lable==1">
		<div class="item div2">
			<h1 class="h1">浏览器分类统计</h1>
			<div id="echartBorwsers-borwser" class="echartBorwsers"></div>
		</div>
		<div class="item div3">
			<h1 class="h1">系统分类统计</h1>
			<div id="echartBorwsers-system" class="echartBorwsers"></div>
		</div>
		<div class="item div3">
			<h1 class="h1">地理位置分类统计</h1>
			<div id="echartBorwsers-address" class="echartBorwsers"></div>
		</div>
	</div>
	<div class="mt20" v-show="lable==1">
		<!-- 公共搜索条件 -->
		<div class="com_search">
			<div class="item">
				<div>
					<span class="name">选择日期查询：</span>
					<input id="zane-calendar-1" class="inp w-200" type="text" placeholder="选择日期查询">
				</div>
			</div>
		</div>
		<div class="overflow_table">
			<!-- table列表 -->
			<table class="table" v-if="isLoadend&&listdata.length">
				<tr class="light_color">
					<th>URL</th>
					<th>页面加载时间</th>
					<th>白屏时间</th>
					<th>DOM构建时间</th>
					<th>解析dom耗时</th>
					<th>DNS解析时间</th>
					<th>TCP连接时间</th>
					<th>页面重定向时间</th>
					<th>unload时间</th>
					<th>request请求耗时</th>
					<th>页面准备时间</th>
					<th>访问轨迹</th>
					<th>页面请求时间</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in listdata">
					<td><a :href="'/web/pagesdetails?id='+item._id">{{item.url}}</a></td>
					<td class="red tc">{{item.load_time|toFixed(true)}}</td>
					<td class="red tc">{{item.white_time|toFixed}}</td>
					<td class="tc">{{item.dom_time|toFixed(true)}}</td>
					<td class="tc">{{item.analysisDom_time|toFixed}}</td>
					<td class="tc">{{item.dns_time|toFixed}}</td>
					<td class="tc">{{item.tcp_time|toFixed}}</td>
					<td class="tc">{{item.redirect_time|toFixed}}</td>
					<td class="tc">{{item.unload_time|toFixed}}</td>
					<td class="tc">{{item.request_time|toFixed}}</td>
					<td class="tc">{{item.ready_time|toFixed}}</td>
					<td class="tc"><a :href="'/web/analysisdetail?markuser='+item.mark_user">轨迹详情</a></td>
					<td class="tc">{{item.create_time|date('/',true)}}</td>
					<td class="tc"><a :href="'/web/pagesdetails?id='+item._id">详情</a></td>
				</tr>
			</table>
		</div>
	</div>
	<div v-show="lable==1">
		<!--  分页 -->
		<div class="tc common_page_style mt10" v-show="isLoadend&&listdata.length">
			<div id="copot-page-pages" class="copot-page"></div>
		</div>
		<!-- 暂无数据 -->
		<div class="tc mt20" v-if="!listdata.length">暂无数据!</div>
	</div>
	<!-- ajax性能资源 -->
	<div v-show="lable==2">
		<div class="overflow_table">
			<!-- table列表 -->
			<table class="table" v-if="isLoadend&&listAjax.length">
				<tr class="light_color">
					<th>AJAX地址</th>
					<th>调用次数</th>
					<th>平均耗时</th>
					<th>平均BODY大小</th>
					<th>请求方式</th>
					<th>调用页面</th>
				</tr>
				<tr v-for="item in listAjax">
					<td><a :href="'/web/ajaxdetail?url='+item._id.url">{{item._id.url}}</a></td>
					<td class="tc">{{item.count}}</td>
					<td class="tc red">{{item.duration|toFixed}}</td>
					<td class="tc red">{{item.body_size|toSize}}</td>
					<td class="red tc">{{item._id.method}}</td>
					<td>{{url}}</td>
				</tr>
			</table>
		</div>
		<!-- 暂无数据 -->
		<div class="tc mt20" v-if="isLoadend&&!listAjax.length">暂无数据!</div>
	</div>
	<!-- 页面慢加载追踪 -->
	<div v-show="lable==3">
		<div class="overflow_table">
			<table class="table" v-if="isLoadend&&listslowpages.length">
				<tr class="light_color">
					<th>URL</th>
					<th>页面加载时间</th>
					<th>性能类型</th>
					<th>白屏时间</th>
					<th>DOM构建时间</th>
					<th>解析dom耗时</th>
					<th>页面准备时间</th>
					<th>页面请求时间</th>
				</tr>
				<tr v-for="item in listslowpages">
					<td><a :href="'/web/pagesdetails?id='+item._id+'&slowpages'" :title="item.url">{{item.url|limitTo(40)}}</a></td>
					<td class="tc red">{{item.load_time|toFixed(true)}}</td>
					<td class="tc red">{{item.speed_type==1?'正常':'慢'}}</td>
					<td class="tc">{{item.white_time|toFixed}}</td>
					<td class="tc">{{item.dom_time|toFixed}}</td>
					<td class="tc">{{item.analysisDom_time|toFixed}}</td>
					<td class="tc">{{item.ready_time|toFixed}}</td>
					<td class="tc">{{item.create_time|date('/',true)}}</td>
				</tr>
			</table>
		</div>
	</div>
	<div v-show="lable==3">
		<!--  分页 -->
		<div class="tc common_page_style mt10" v-show="listslowpages.length">
			<div id="copot-page-slowpages" class="copot-page"></div>
		</div>
		<!-- 暂无数据 -->
		<div class="tc mt20" v-if="!listslowpages.length">暂无数据!</div>
	</div>
	<!-- 页面慢资源加载 -->
	<div v-show="lable==4">
		<div class="overflow_table">
			<table class="table" v-if="isLoadend&&listresources.length">
				<tr class="light_color">
					<th>URL</th>
					<th>资源加载耗时</th>
					<th>性能类型</th>
					<th>资源返回大小</th>
					<th>请求url</th>
					<th>创建时间</th>
				</tr>
				<tr v-for="item in listresources">
					<td><span><a :href="'/web/resourcesdetail?url='+item.name">{{item.name}}</a></span></td>
					<td class="tc red">{{item.duration|toFixed(true)}}</td>
					<td class="tc red">{{item.speed_type==1?'正常':'慢'}}</td>
					<td class="tc">{{item.decodedBodySize|toSize}}</td>
					<td class="tc">{{item.url|limitTo(50)}}</td>
					<td class="tc">{{item.create_time|date('/',true)}}</td>
				</tr>
			</table>
		</div>
	</div>
	<div v-show="lable==4">
		<!--  分页 -->
		<div class="tc common_page_style mt10" v-show="listresources.length">
			<div id="copot-page-slowresources" class="copot-page"></div>
		</div>
		<!-- 暂无数据 -->
		<div class="tc mt20" v-if="!listresources.length">暂无数据!</div>
	</div>
</div>

<script>
	new Vue({
		el: '#pages',
		data: function () {
			return {
				lable:1,
				pagesItemData: {},
				listdata: [],
				listAjax:[],
				listslowpages:[],
				listresources:[],
				pageNo: 1,
				type:1,
				pageSize: config.pageSize,
				totalNum: 0,
				beginTime: '',
				endTime: '',
				isLoadend: false,
				appId: util.getStorage('local', 'appId'),
				url:'',
			}
		},
		filters: {
			toFixed: window.Filter.toFixed,
			toSize: window.Filter.toSize,
			date: window.Filter.date,
			limitTo: window.Filter.limitTo,
		},
		mounted() {
			this.pagesItemData = util.getStorage('session', 'pagesItemData') ? JSON.parse(util.getStorage('session', 'pagesItemData')) : {}
			this.url = this.pagesItemData._id.url
			
			this.checkoutLabel(1);
		},
		methods: {
			getSearchData(){
				this.lable = 1;
				this.isLoadEnd = false
				this.pageNo = 1
				let times = util.getSearchTime()
				this.beginTime = times.beginTime
				this.endTime = times.endTime

				this.getinit('api/v1/pages/getOnePageList', '#copot-page-pages');
				this.getDataGroupBy(1);
				this.getDataGroupBy(2);
				this.getDataGroupBy(3);
			},
			checkoutLabel(lable,type) {
				this.lable = lable;
				this.isLoadEnd = false
				this.pageNo = 1
				this.type = 1;
				let api = ''
				let pageName = ''

				if (lable == 1) {
					if(!this.listdata.length || type){
						pageName = '#copot-page-pages'
						api = 'api/v1/pages/getOnePageList'
						this.getDataForTime(api, pageName);
					} 
					api = 'api/v1/pages/getOnePageList'
				} else if (lable == 2) {
					if(!this.listAjax.length){
						api = 'api/v1/ajax/getPageAjaxsAvg',
						pageName = '#copot-page-ajax'
						this.getinit(api, pageName);
					}
				} else if(lable == 3){
					if (!this.listslowpages.length) {
						api = 'api/v1/pages/getOnePageList',
						pageName = '#copot-page-slowpages'
						this.type = 2;
						this.getinit(api, pageName);
					}
				}else if(lable == 4){
					if (!this.listresources.length) {
						api = 'api/v1/resource/getResourceForType',
						pageName = '#copot-page-slowresources'
						this.type = 2;
						this.getinit(api, pageName);
					}
				}
			},
			// 页面性能详情
			getDataForTime(api, pageName){
				let times = util.getSearchTime()
				this.beginTime = times.beginTime
				this.endTime = times.endTime

				this.getinit(api, pageName);
				this.searchForTime();
				this.getDataGroupBy(1);
				this.getDataGroupBy(2);
				this.getDataGroupBy(3);
			},
			getinit(api, pageName) {
				this.isLoadend = false;
				util.ajax({
					type:'get',
					url: config.baseApi + api,
					data: {
						type:this.type,
						appId:this.appId,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						beginTime: this.beginTime,
						endTime: this.endTime,
						url: this.url,
						type:this.type,
					},
					success: data => {
						this.isLoadend = true;
						if (!data.data.datalist && !data.data.datalist.length) return;
						switch (this.lable) {
							case 1:
								this.listdata = data.data.datalist
								break;
							case 2:
								this.listAjax = data.data.datalist
								break;
							case 3:
								this.listslowpages = data.data.datalist
								break;
							case 4:
								this.listresources = data.data.datalist
								break;
						}
						new Page({
							parent: $(pageName),
							nowPage: this.pageNo,
							pageSize: this.pageSize,
							totalCount: data.data.totalNum,
							callback: (nowPage, totalPage) => {
								this.pageNo = nowPage;
								this.getinit(api, pageName);
							}
						});
					}
				})
			},
			searchForTime(){
				zaneDate({
					elem: '#zane-calendar-1',
					type: 'doubleday',
					format: 'yyyy/MM/dd',
					done: (fulltime, begintime, endtime) => {
						this.beginTime = begintime ? begintime + ' 00:00:00' : '';
						this.endTime = endtime ? endtime + ' 23:59:59' : '';
						this.getinit('api/v1/pages/getOnePageList', '#copot-page-pages');
					},
				});
			},
			gotodetail(item) {
				if (this.slow && this.slow == 'slow') {
					util.setStorage('session', 'slowpagesItemData', JSON.stringify(item))
					location.href = "/slowpages/detail?type=zane"
				} else {
					util.setStorage('session', 'pagesItemData', JSON.stringify(item))
					location.href = "/pages/detail?type=zane"
				}
			},
			// 访问页面分组
			getDataGroupBy(type) {
				util.ajax({
					type: 'get',
					url: config.baseApi + 'api/v1/environment/getDataGroupBy',
					data: {
						appId: this.appId,
						url: this.url,
						beginTime: this.beginTime,
						endTime: this.endTime,
						type: type // 1：城市  2：浏览器  3：系统
					},
					success: data => {
						this.isLoadEnd = true;
						switch (type) {
							case 1:
								this.getData(data.data, 'echartBorwsers-address', 'city')
								break;
							case 2:
								this.getData(data.data, 'echartBorwsers-borwser', 'browser', 'borwserVersion')
								break;
							case 3:
								this.getData(data.data, 'echartBorwsers-system', 'system', 'systemVersion')
								break;
						}

					}
				})
			},
			getData(datas, id, tyle, typeVersion) {
				let seriesData = [];
				let legendData = []
				let totalcount = 0
				if (!datas.length) return;
				datas.forEach(item => {
					totalcount += item.count
				})
				datas.forEach(item => {
					let name = '';
					if(tyle == 'city'){
						name = item._id.city || '其他';
					}else if(tyle == 'browser'){
						name = item._id.browser || '其他';
					}else if(tyle == 'system'){
						name = item._id.system || '其他';
					}
					legendData.push({
						name: name,
						icon: 'circle',
					})
					seriesData.push({
						name: name,
						value: item.count,
						percentage: ((item.count / totalcount) * 100).toFixed() + '%'
					})
				})
				this.echartBorwsers(id, legendData, seriesData)
			},
			// echart表
			echartBorwsers(id, legendData, seriesData) {
				var myChart = echarts.init(document.getElementById(id));
				var option = {
					tooltip: {
						formatter: "{b} : {c} ({d}%)"
					},
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: 0,
						containLabel: true,
						borderWidth: 0,
					},
					color: ['#f44336', '#00bcd4', '#3cd87f', '#ffeb3b', '#9c27b0', '#e91e63', '#ff9800', '#ff5722'],
					legend: {
						orient: 'vertical',
						x: 'right',
						padding: 0,
						itemWidth: 15,
						itemHeight: 10,
						data: legendData,
						formatter: function (name) {
							for (let i = 0; i < seriesData.length; i++) {
								if (name === seriesData[i].name) {
									return name + '  ' + seriesData[i].value + '  ' + seriesData[i].percentage;
								}
							}
						}
					},
					series: [{
						type: 'pie',
						radius: '50%',
						center: ['40%', '50%'],
						label: {
							normal: {
								show: false,
							},
						},
						data: seriesData
					}]
				};
				myChart.setOption(option);
			},
		}
	})
</script>